<template>
  <el-button ref="themeButton" v-bind="$attrs" :color="current.configName != '其他类' ? current.configCode : ''" :type="current.configName != '其他类'?'primary':''"><slot /></el-button>
</template>

<script setup lang="ts">
import { ref, shallowRef, computed, onMounted, nextTick } from 'vue'
import { useAppStore } from '@/store'
const appStore = useAppStore()

defineOptions({
  name: 'TButton',
  inheritAttrs: false
})

const props = defineProps({
  name: {
    type: String,
    default: () => ''
  }
})

const current = computed(() => {
  return appStore.themeButton.find((i) => i.configName === props.name) || {}
})

const themeButton = ref(null)

onMounted(() => {
  nextTick(() => {
    if (current.value.configName != '其他类') {
      themeButton.value.ref.style.setProperty('--el-color-black', 'white')
      themeButton.value.ref.style.setProperty('--el-button-text-color', 'white')
      themeButton.value.ref.style.setProperty(
        '--el-button-hover-text-color',
        'white'
      )
      themeButton.value.ref.style.backgroundColor = current.value.configCode
    } else {
      themeButton.value.ref.style.setProperty(
        '--el-button-text-color',
        current.value.configCode
      )
      themeButton.value.ref.style.setProperty(
        '--el-button-border-color',
        current.value.configCode
      )
      themeButton.value.ref.style.setProperty(
        '--el-button-hover-text-color',
        current.value.configCode
      )
      themeButton.value.ref.style.setProperty(
        '--el-button-hover-border-color',
        current.value.configCode
      )
      themeButton.value.ref.style.setProperty(
        '--el-button-hover-bg-color',
        'white'
      )
    }
  })

})
</script>

<style lang="scss" scoped></style>
